import React, { Component } from 'react'

export default class Demo8 extends Component {
  render() {
    return (
      <div>
        <Parent></Parent>
      </div>
    )
  }
}

class Parent extends Component {

  state={
    hasError:''
  }

  static getDerivedStateFromError(error){
    console.log('组件render错误',error)
    return {
      hasError:error
    }
  }

  componentDidCatch(error,info){
    //统计页面错误，发送请求到回台，通知编码人员修改错误
    console.log(error,info)
  }

  render() {
    const { hasError } = this.state
    return (
      <div>
        <h2>我是父组件</h2>
        {hasError? <h2>当前网络不稳定，请稍后再试...</h2>:<Child></Child>}
      </div>
    )
  }
}

class Child extends Component {

  state={
    list:'123',
    a:[
      {id:'001',name:'jack',age:26},
      {id:'002',name:'tom',age:33},
      {id:'0013',name:'tony',age:35},
    ]
  }

  render() {
    const { list } = this.state
    return (
      <div>
        <h2>我是子组件</h2>
        {
          list.map(i=>{
            return <h4 key={i.id}>{`姓名：${i.name};年龄：${i.age}`}</h4>
          })
        }
      </div>
    )
  }
}
